<template>
<view class="message-container">
	<view>
		<view>
			<img class="notification" src="/static/images/message//notification-off.png" alt="图片加载失败">
			<img class="slider" src="/static/images/message//sliders.png" alt="图片加载失败">
		</view>
		<view>
			<input class="serach" auto-focus placeholder="搜索聊天记录、群号"/>
			<img class="serachicon" src="/static/images/message//search.png" alt="图片加载失败">
		</view>
	</view>
		
	
	<scroll-view class="body">
		<view class='user'>
			<view>
				<image class='user-icon' src="../../static/images/message/25.png" alt="图片加载失败"></image>
			</view>
			<view class="title">
				<text>系统推送</text>
			</view>
			<view class="message">
				<text>您关注的人升级了</text>
			</view>
			<view >
				<image class="arrow-right" src="../../static/images/message/arrow-right.png"></image>
			</view>
			<view class='linecut'></view>
		</view>
			
			

		<view class='user'>
			<view>
				<image class='user-icon' src="../../static/images/message/25.png" alt="图片加载失败"></image>
			</view>
			<view class="title">
				<text>系统推送</text>
			</view>
			<view class="message">
				<text>您关注的人升级了</text>
			</view>
			<view >
				<image class="arrow-right" src="../../static/images/message/arrow-right.png"></image>
			</view>
			<view class='linecut'></view>
		</view>
	</scroll-view>
</view>
</template>

<script>
</script>

<style> 
	page{
    height:100%;
	}
	.message-container{
		position: relative;
		/* 聊天 */
		background-color: rgb(255, 255, 255);
		height: 100%;
		width: 100%;
	}
	.notification{
		/* Icons / Control-Settings / notification-off */
		position: absolute;
		width: 38.4rpx;
		height: 38.4rpx;
		left: 28.73rpx;
		right: 681rpx;
		top: 32.14rpx;
		bottom: 686.4rpx;
	}
	.slider{
		/* Icons / Control-Settings / sliders */
		position: absolute;
		width: 38.4rpx;
		height: 38.4rpx;
		left: 682.65rpx;
		right: 30.45rpx;
		top:  32.14rpx;
		bottom: 686.4rpx;
	}
	.serach{
		/* Rectangle */
		position: absolute;
		width: 697.74rpx;
		height: 80.08rpx;
		left: 34.36rpx;
		right: 30.45rpx;
		top: 116.68rpx;
		bottom:4980rpx;
		background: rgb(231, 231, 231);
		opacity: 0.35;
		box-shadow: 0rpx 9rpx 16rpx rgba(0, 0, 0, 0.4);
		border: 0ch;
		border-radius:12.18rpx;

	}
	.serachicon{
		/* Shape */
		position: absolute;
		width: 53.80rpx;
		height: 56.80rpx;
		left: 663.5rpx;
		right: 34.8rpx;
		top: 130.68rpx;
		opacity: 0.41;
		background-color: transparent;
		float: left;
	}
	.body{
		background-color: white;
		position: absolute;
		top: 260rpx;
		height: 1020rpx;
	}
		
	.user{
		display: flex;
		position: relative;
		flex-direction: row;
		height: 176rpx;
		width: 754rpx;
		background-color:white;
	}
	

	.user-icon{
		/* 蒙版组 25 */
		position: absolute;
		width: 144.7rpx;
		height: 144.7rpx;
		left: 25.43rpx;
		right: 607.61rpx;
		top: 7rpx;
	}
	.title{
		/* 系统推送 */
		position: absolute;
		width: 400.2rpx;
		height: 58.2rpx;
		left: 187rpx;
		top: 26.1rpx;
		color: rgb(0, 0, 0);
		background-color: aquamarine;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 0px;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.message{
		/* 您关注的人升级啦！ */
		position: absolute;
		width: 450rpx;
		height: 248.5rpx;
		left: 187rpx;
		top: 82.56rpx;
		color: rgb(145, 145, 145);
		font-family: PingFang SC;
		font-size: 31.32rpx;
		font-weight: undefined;
		line-height: 47rpx;
		letter-spacing: 0rpx;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
		
	.arrow-right{
		/* Icons / Arrows / arrow-right-1 */
		position: absolute;
		width: 26.5rpx;
		height: 41.76rpx;
		left: 685rpx;
		top: 56.2rpx;

	}
	
	.linecut{
	  /* Path */
	  position: absolute;
	  width: 679.2rpx;
	  left: 29rpx;
	  border: 1.73rpx solid rgb(227, 229, 232);
	  height: 2rpx;
	  background-color: #c8d6e2;
	  top: 150rpx;
	}

</style>